$(function () {
    //联络站信息柱状图
    var option ={
        grid: {
            top: '8%',
            left: '5%',
            right: '3%',
            bottom: '2%',
            containLabel: true
        },
        title: {
            text: ''
        },
        color:['#7CB5EC','#90ED7D','#F7A35C','#F15C80','','','','','','','',''],
        xAxis: {
            type: 'category',
            data: [
                '袁花镇','海洲街道','海昌街道','斜桥镇','黄湾镇','周王庙镇','盐官镇','长安镇','许村镇','丁桥镇','硖石街道','马桥街道'
            ],
            axisLabel: {
                interval: 0,
                rotate: 0,
                fontSize: 10,
            },
            splitLine: {
                show: false
            },
            axisLine:{
                show:true,
                lineStyle:{
                    width:0.7,
                    color:'#666'
                }
            },
            axisTick:{
                show:false
            }
        },
        yAxis: {
            min: 0,
            splitLine: {
                show: true,
                lineStyle:{
                    type:'dotted'
                }
            },
            axisLine:{
                show:false,
                lineStyle:{
                    width:0.7,
                    color:'#666'
                }
            }
        },
        tooltip: {
            // trigger: 'axis',
            textStyle:{
                align:'left'
            },
            formatter: '{a0}<br />{b0}: {c0}件'
        },
        legend: {
            show: false
        },
        series: [{
            name: '各联络站代表人数',
            // colorByPoint:true,
            data: [86,23,21,103,67,88,96,126,145,81,33,17],
            color:['#9DABFF','#FD8787','#FFCA7C','#FCF26D','#8AEC88','#3EBFFD','#76B0F8','#D1A0FF','#fb9cb8','#97F583','#FCAD62','#868BF2'],
            type: 'bar',
            itemStyle: {
                normal: {
                    color: function(params) {
                        // build a color map as your need.
                        var colorList = ['#9DABFF','#FD8787','#FFCA7C','#FCF26D','#8AEC88','#3EBFFD','#76B0F8','#D1A0FF','#fb9cb8','#97F583','#FCAD62','#868BF2'];
                        return colorList[params.dataIndex]
                    },
                    //以下为是否显示，显示位置和显示格式的设置了
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{c}'
                    }
                }
            },
            //设置柱的宽度，要是数据太少，柱子太宽不美观~
            // barWidth:20,
        }]
    };
    var myChart = echarts.init(document.getElementById("chart"));
    myChart.setOption(option);
    window.addEventListener("resize",function(){//适应div大小
        myChart.resize();
    });

    //各区县联络站总数占比
    // Build the chart
    var option1 = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
            textStyle:{
                align:'left'
            },
        },
        color: ['#197FFD', '#9084EE', '#DF3F9A', '#FE625C', '#FF8200', '#FFDF4F', '#13C3C2'],
        legend: {
            show: true,
            width:300,              // 宽度
            itemGap: 10,            // 间隔
            itemWidth: 15,          // 图形宽度。
            itemHeight: 15,
            bottom: '10%',
            left: 'center',
            // data:[],
            formatter: [
                '{a|{name}}'+'{b|}'
            ].join('\n'),//图例换行对齐
            textStyle: {
                rich: {
                    a: {
                        width: 55,
                        // color: '#909399',
                        fontSize: 12,
                        lineHeight: 12
                    }
                },
            },
        },
        series: [{
            name: '联络站数量占比',
            type: 'pie',
            center: ['50%', '38%'],
            radius:'50%',
            selectedMode: 'single',
            avoidLabelOverlap: false,
            label: {
                normal:{
                    show:false,
                },
                // show: true
            },
            emphasis: {
                label: {
                    show: true,
                }
            },
            labelLine: {
                show: true,
                length:30,
                length2:15,
                smooth:false,
                minTurnAngle:90,
                maxSurfaceAngle:90
            },
            data: [{
                name: '海宁',
                value: 13,
                selected: true
            }, {
                name: '海盐',
                value: 10
            }, {
                name: '嘉善',
                value: 10
            }, {
                name: '桐乡',
                value: 12
            }, {
                name: '南湖',
                value: 14
            }, {
                name: '秀洲',
                value: 10
            },{
                name: '平湖',
                value: 10
            }]
        }]
    };
    var myChart1 = echarts.init(document.getElementById("chart2"));
    myChart1.setOption(option1);
    window.addEventListener("resize",function(){//适应div大小
        myChart1.resize();
    });
})